<?php require_once 'inc/header.php'; ?>
<?php

$stmt = $db->prepare('SELECT title, lat, lng FROM checkins WHERE fbid = ?');
$stmt->execute(array($_SESSION['me']['fbid']));
$points = $stmt->fetchAll();
$friends = $db->q('
	SELECT fbid, name
	FROM users
	WHERE fbid IN (SELECT friend_fbid FROM friends WHERE user_fbid = ?)
	ORDER BY name
', $_SESSION['me']['fbid']);

$popularFriendCheckins = $db->q('
	SELECT title, COUNT(*) AS count FROM (SELECT DISTINCT fbid, title, lat, lng FROM checkins) t WHERE fbid IN (SELECT friend_fbid FROM friends WHERE user_fbid = ?) GROUP BY title, lat, lng ORDER BY count DESC LIMIT 10
', $_SESSION['me']['fbid']);
$pfcRows = array();
$pfcMax = 0;
foreach ($popularFriendCheckins as $c) {
	$count = (int)$c['count'];
	$pfcMax = $count > $pfcMax ? ceil($count / 4) * 4 : $pfcMax;
	$pfcRows[] = array($c['title'], $count);
}

?>
<div id="compareCheckinsContainer">
	Compare with 
	<select id="compareCheckinsWith" multiple>
		<?php foreach ($friends as $f) printf('<option value="%s">%s</option>', htmlentities($f['fbid']), htmlentities($f['name'])); ?>
	</select>
</div>
<div id="map"></div>
<div id="pfcChart"></div>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	var points = <?php echo json_encode($points); ?>;
    var myLatlng = new google.maps.LatLng(1.3463626, 103.8336427);
	
    var map = new google.maps.Map(document.getElementById("map"), {
      zoom: 11,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
	
	for (var i = 0; i < points.length; i++) {
		new google.maps.Marker({
			position: new google.maps.LatLng(points[i].lat, points[i].lng), 
			map: map,
			title: points[i].title
		});
	}
	
	var friendCheckins = {};
	$('#compareCheckinsWith').multiselect({
		noneSelectedText: 'None',
		header: false,
		selectedList: 2
	}).bind('multiselectclick', function(e, i) {
		//console.log($(this).multiselect('getChecked'));
		var fbid = i.value;
		var name = i.text;
		var checked = i.checked;
		console.log(fbid, name, checked);
		
		if (checked) {
			if (!$.isArray(friendCheckins[fbid])) {
				$('#notice').text('Pulling checkin data...').slideDown('fast');
				console.log(('000000' + (fbid % 16777216).toString(16)).substr(-6));
				$.get('checkin_data.php?signed_request=<?php if (!empty($_POST['signed_request'])) echo $_POST['signed_request']; ?>&fbid=' + fbid, function(points) {
					friendCheckins[fbid] = [];
					for (var i = 0; i < points.length; i++) {
						friendCheckins[fbid].push(new google.maps.Marker({
							position: new google.maps.LatLng(points[i].lat, points[i].lng), 
							map: map,
							title: points[i].title,
							icon: createMarkerIcon(name.substr(0, 1).toUpperCase(), ('000000' + (fbid % 16777216).toString(16)).substr(-6))
						}));
					}
					$('#notice').slideUp('fast', function() {
						$(this).empty();
					});
				});
			} else {
				for (var i = 0; i < friendCheckins[fbid].length; i++) friendCheckins[fbid][i].setVisible(true);
			}
		} else {
			for (var i = 0; i < friendCheckins[fbid].length; i++) friendCheckins[fbid][i].setVisible(false);
		}
	}).multiselect('widget').mouseenter(function() {
		$(this).one('mouseleave', function() {
			$('#compareCheckinsWith').multiselect('close');			
		});
	});
	
	function createMarkerIcon(letter, colour) {
		return new google.maps.MarkerImage(
			"https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=" + letter + "|" + colour,
			new google.maps.Size(40, 37),
			new google.maps.Point(0,0),
			new google.maps.Point(10, 34));
	}
	
	var pfcData = new google.visualization.DataTable();
	pfcData.addColumn('string', 'Place');
	pfcData.addColumn('number', 'Friends');
	pfcData.addRows(<?php echo json_encode($pfcRows); ?>);
	var pfcChart = new google.visualization.BarChart(document.getElementById('pfcChart'));
	pfcChart.draw(pfcData, {title: 'Popular Friend Checkins - Top 10', chartArea: {left:200}, hAxis:{minValue: 0, maxValue: <?php echo $pfcMax; ?>}});
</script>

<?php require_once 'inc/footer.php'; ?>
